<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2024/6/5
  Time: 下午3:02
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/style.css">
</head>
<body>
<div class="header">
    <%@ include file="header.jsp" %>
</div>
<div class="main">
    <div class="sidebar">
        <%@ include file="sidebar.jsp" %>
    </div>
    <div class="content">
        <%@ include file="content.jsp" %>
    </div>
</div>

</body>

</html>
<script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
<script>
    // 监听侧边栏标签的点击事件
    $(".sidebar").on("click", "a", function(event) {
        // 阻止默认跳转行为
        event.preventDefault();
        // 获取点击的标签
        var page = $(this).data('page');
        console.log(page);
        // 发起Ajax请求加载目标页面内容
        $.get(page, function(data) {
            // 将页面内容展示在content部分
            $(".content").html(data);
        });
    });


</script>
<style>
    /* style.css */

    /* 设置整个页面的布局为弹性盒子布局 */
    body, html {
        height: 100%;
        margin: 0;
        display: flex;
        flex-direction: column; /* 设置为上下排列 */
    }

    /* 头部样式 */
    .header {
        width: 100%;
        background-color: #333; /* 设置头部背景色 */
        color: #fff; /* 设置文字颜色 */
        padding: 10px; /* 设置内边距 */
    }

    /* 主体部分样式 */
    .main {
        display: flex; /* 设置为弹性盒子布局 */
        flex: 1; /* 占据剩余空间 */
    }

    /* 侧边栏样式 */
    .sidebar {
        width: 200px; /* 设置侧边栏宽度 */
        background-color: #f0f0f0; /* 设置侧边栏背景色 */
        padding: 20px; /* 设置内边距 */
    }

    /* 内容区域样式 */
    .content {
        flex: 1; /* 占据剩余空间 */

        padding: 20px; /* 设置内边距 */
        background-color: #fff; /* 设置内容区域背景色 */
    }




</style>